{% if site.gitalk.clientID and page.comments == true %}
<div id="comments">
    <div id="gitalk-container"></div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
    var gitalk = new Gitalk({
        clientID: '{{ site.gitalk.clientID }}',
        clientSecret: '{{ site.gitalk.clientSecret }}',
        repo: '{{ site.gitalk.repo }}',      // The repository of store comments,
        owner: '{{ site.gitalk.owner }}',
        admin: ['{{ site.gitalk.owner }}'],
        id: '{{ page.title }}',      // Ensure uniqueness and length less than 50
        distractionFreeMode: false,  // Facebook-like distraction free mode
        title: "{{ page.title }}"
    })
    
    gitalk.render('gitalk-container')
</script>
{% endif %}